<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>&lt;input type="tel"&gt; example</title>
    <style>
        div {
        margin-bottom: 10px;
        position: relative;
        }

        input[type="number"] {
          width: 100px;
        }

        input + span {
          padding-right: 30px;
        }

        input:invalid+span:after {
          position: absolute; content: '✖';
          padding-left: 5px;
        }

        input:valid+span:after {
          position: absolute;
          content: '✓';
          padding-left: 5px;
        }
    </style>
   </head>
  <body>
    <form>
      <div>
        <label for="country">Choose your country:</label>
        <select id="country" name="country">
          <option>UK</option>
          <option selected>US</option>
          <option>Germany</option>
        </select>
      </div>
      <div>
        <p>Enter your telephone number: </p>
        <span class="areaDiv">
          <input id="areaNo" name="areaNo" type="tel" required
                 placeholder="Area code" pattern="[0-9]{3}"
                 aria-label="Area code">
          <span class="validity"></span>
        </span>
        <span class="number1Div">
          <input id="number1" name="number1" type="tel" required
                 placeholder="First part" pattern="[0-9]{3}"
                 aria-label="First part of number">
          <span class="validity"></span>
        </span>
        <span class="number2Div">
          <input id="number2" name="number2" type="tel" required
                 placeholder="Second part" pattern="[0-9]{4}"
                 aria-label="Second part of number">
          <span class="validity"></span>
        </span>
      </div>
      <div>
        <button>Submit</button>
      </div>
    </form>
    <script>
      var selectElem = document.querySelector("select");
      var inputElems = document.querySelectorAll("input");

      selectElem.onchange = function() {
        for(var i = 0; i < inputElems.length; i++) {
          inputElems[i].value = "";
        }

        if(selectElem.value === "US") {
          inputElems[2].parentNode.style.display = "inline";

          inputElems[0].placeholder = "Area code";
          inputElems[0].pattern = "[0-9]{3}";

          inputElems[2].placeholder = "First part";
          inputElems[1].pattern = "[0-9]{3}";
          inputElems[1].setAttribute("aria-label","First part of number");

          inputElems[2].placeholder = "Second part";
          inputElems[2].pattern = "[0-9]{4}";
          inputElems[2].setAttribute("aria-label","Second part of number");
        } else if(selectElem.value === "UK") {
          inputElems[2].parentNode.style.display = "none";

          inputElems[0].placeholder = "Area code";
          inputElems[0].pattern = "[0-9]{3,6}";

          inputElems[1].placeholder = "Local number";
          inputElems[1].pattern = "[0-9]{4,8}";
          inputElems[1].setAttribute("aria-label","Local number");
        } else if(selectElem.value === "Germany") {
          inputElems[2].parentNode.style.display = "inline";

          inputElems[0].placeholder = "Area code";
          inputElems[0].pattern = "[0-9]{3,5}";

          inputElems[1].placeholder = "First part";
          inputElems[1].pattern = "[0-9]{2,4}";
          inputElems[1].setAttribute("aria-label","First part of number");

          inputElems[2].placeholder = "Second part";
          inputElems[2].pattern = "[0-9]{4}";
          inputElems[2].setAttribute("aria-label","Second part of number");
        }
      }
    </script>
</body>
  </html>
